<ul class="nav navbar-nav align-items-center flex-nowrap">
    <li class="nav-item dropdown">
        <span class="form-select" id="app-name" #button (click)="appsMenu.toggle()">
            @if (appsState.selectedApp | async; as app) {
                {{ app.displayName }}
            } @else {
                @if (teamsState.selectedTeam | async; as team) {
                    {{ team.name }}
                } @else {
                    {{ "apps.appsButtonFallbackTitle" | sqxTranslate }}
                }
            }
        </span>
        <sqx-dropdown-menu
            class="d-flex flex-column"
            position="bottom-start"
            scrollY="true"
            [sqxAnchoredTo]="button"
            *sqxModal="appsMenu; closeAlways: true; onRoot: false">
            @if (appsState.apps | async; as apps) {
                @if (apps.length > 0) {
                    <a class="dropdown-item dropdown-header" routerLink="/app">
                        <div class="row g-0 align-items-center">
                            <div class="col">{{ "apps.allApps" | sqxTranslate }}</div>

                            <div class="col-auto">
                                <span class="badge badge-primary rounded-pill">{{ apps.length }}</span>
                            </div>
                        </div>
                    </a>
                    <div class="apps-list">
                        @for (app of apps; track app.id) {
                            <a class="dropdown-item" [routerLink]="['/app', app.name]" routerLinkActive="active"> {{ app.displayName }} </a>
                        }
                    </div>
                }
            }

            @if (teamsState.teams | async; as teams) {
                @if (teams.length > 0) {
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item dropdown-header" routerLink="/app">
                        <div class="row g-0 align-items-center">
                            <div class="col">{{ "apps.allTeams" | sqxTranslate }}</div>

                            <div class="col-auto">
                                <span class="badge badge-primary rounded-pill">{{ teams.length }}</span>
                            </div>
                        </div>
                    </a>
                    <div class="teams-list">
                        @for (team of teams; track team.id) {
                            <a class="dropdown-item" [routerLink]="['/app/teams', team.id]" routerLinkActive="active"> {{ team.name }} </a>
                        }
                    </div>
                }
            }

            @if ((uiState.settings | async)?.canCreateApps || (uiState.settings | async)?.canCreateApps) {
                <div class="dropdown-divider"></div>

                <div class="dropdown-header">
                    <button class="btn btn-block btn-success" (click)="addAppDialog.show()" type="button">
                        <i class="icon-plus"></i> {{ "apps.appsButtonCreate" | sqxTranslate }}
                    </button>
                </div>

                @if ((uiState.settings | async)?.canCreateTeams) {
                    <div class="dropdown-header">
                        <button class="btn btn-block btn-sm btn-text-success" (click)="addTeamDialog.show()" type="button">
                            {{ "apps.appsButtonCreateTeam" | sqxTranslate }}
                        </button>
                    </div>
                }
            }
        </sqx-dropdown-menu>
    </li>

    @if (appPath | async; as path) {
        <nav aria-label="breadcrumb">
            @if (path.length > 0) {
                <ol class="breadcrumb ms-2">
                    <li class="breadcrumb-item"></li>

                    @for (item of path; track item.value; let last = $last) {
                        <li class="breadcrumb-item" [class.active]="last">
                            <a [class.disabled]="last" [relativeTo]="route" [routerLink]="item.route">{{ item.localized }}</a>
                        </li>
                    }
                </ol>
            }
        </nav>
    }
</ul>
<sqx-app-form (dialogClose)="addAppDialog.hide()" *sqxModal="addAppDialog" />
<sqx-team-form (dialogClose)="addTeamDialog.hide()" *sqxModal="addTeamDialog" />
